<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Springboot增删改查案例</title>

    <!-- All Css files -->

    <link rel="stylesheet"
          href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css">
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- All Js Files -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/1.10.0/popper.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/js/bootstrap.min.js"></script>

    <script src="assets/js/custom.js"></script>

</head>
<body>
<div class="container-xl">
    <div class="table-responsive">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>用户管理模板</b></h2>
                    </div>
                    <div class="col-sm-6">
                        <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i
                                class="fa fa-plus"></i> <span>新增</span></a>
                        <a href="#deleteBatchEmployeeModal"  class="btn btn-danger" data-toggle="modal"><i
                                class="fa fa-minus-circle"></i> <span>删除</span></a>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>
							<span class="custom-checkbox">
								<input type="checkbox" id="selectAll">
								<label for="selectAll"></label>
							</span>
                    </th>
                    <th>用户名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="usersListBody">
                <!--
                <tr>
                    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="usersIdChkbox" value="1">
								<label for="usersIdChkbox"></label>
							</span>
                    </td>
                    <td>宋小宝</td>
                    <td>男</td>
                    <td>1999-10-10</td>
                    <td>baobao1999@qq.com</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>
                -->

                </tbody>
            </table>
            <div class="clearfix">
                <div class="hint-text">总记录：<b id="totalRecodes">100</b>&nbsp;&nbsp; 每页: <b id="perPagerSize">25</b> 条记录</div>
                <ul class="pagination" id="myPager">
                    <li class="page-item"><a href="#" class="page-link">上一页</a></li>
                    <li class="page-item"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item active"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Edit Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addUserForm">
                <div class="modal-header">
                    <h4 class="modal-title">新增用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio"
                                                                                                       name="gender"
                                                                                                       value="女"/>女
                        </div>
                    </div>
                    <div class="form-group">
                        <label>出生日期</label>
                        <input type="date" name="birthday" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>电子邮箱</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>

                    <div class="form-group">
                        <label>手机</label>
                        <input type="text" class="form-control" name="mobile" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="button" class="btn btn-success" onclick="doSave()" value="新增">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editUserForm">

                <div class="modal-header">
                    <h4 class="modal-title">更新用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                        <input type="hidden" id="uid" name="uid" value="">
                        <input type="hidden" id="version" name="version" value="">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio"
                                                                                                       name="gender"
                                                                                                       value="女"/>女
                        </div>
                    </div>
                    <div class="form-group">
                        <label>出生日期</label>
                        <input type="date" name="birthday" id="birthday" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>电子邮箱</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                    </div>

                    <div class="form-group">
                        <label>手机</label>
                        <input type="text" class="form-control" name="mobile" id="mobile" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="button" class="btn btn-success" onclick="doUpdate()" value="更新">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <h4 class="modal-title">删除用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>确定要删除该用户吗?</p>
                    <p class="text-warning"><small>该操作不可回滚.</small></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="button" class="btn btn-danger" onclick="doDelete()" value="删除">
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Delete Modal HTML -->
<div id="deleteBatchEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <h4 class="modal-title">批量删除用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>确定要删除该用户吗?</p>
                    <p class="text-warning"><small>该操作不可回滚.</small></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="button" class="btn btn-danger" onclick="doDeleteBatch()" value="删除">
                </div>
            </form>
        </div>
    </div>
</div>


<!-- AddOrUpdate Success Modal HTML -->
<div id="addOrUpdateSuccessModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p><span id="addOrUpdateSuccessModal_msg"></span></p>
                </div>
                <div class="modal-footer">
                    <input type="button" onclick="closeAddOrUpdateSuccessModal()" class="btn btn-danger" value="确定">
                </div>
            </form>
        </div>
    </div>
</div>

<!--添加自定义的工具类库-->
<script src="assets/util/myutil.js"></script>
<!--添加用户业务逻辑接口-->
<script src="assets/api/users.js"></script>

<script>

    //用户集合
    let users = [];
    let currentDeleteUid = ''; //全局变量
    let pager = {}; //全局的分页对象；
    let currentPagerNumber = 1; //默认当前页号是第一页；

    //这个用户集合应该是通过发送一个异步请求来获取。
    function initUsersList(pagerNo) {
        console.log('----初始化用户列表----');
        //这里不能查询所有用户资料。

        //查询第一页的用户资料；
        queryPagerUsers(pagerNo).then(resp=>{
            console.log('----查询分页用户列表成功----');
            console.log(resp.data);
            if (resp.code === 200) {
                pager = resp.data;
                currentPagerNumber = pager.current;
                users = resp.data.records;
                refreshUsersTableList(users); //调用更新用户列表的方法。
                refreshPager();
            }
        })

    }

    initUsersList(currentPagerNumber);

    //更新用户列表的方法
    function refreshUsersTableList(usersList) {

        let html = '';
        $("#usersListBody").empty();
        for (let i = 0; i < usersList.length; i++) {
            let u = usersList[i];
            html += `<tr>
                    <td>
\t\t\t\t\t\t\t<span class="custom-checkbox">
\t\t\t\t\t\t\t\t<input type="checkbox" class="usersIdChkbox" value="${u.uid}">
\t\t\t\t\t\t\t\t<label for="usersIdChkbox"></label>
\t\t\t\t\t\t\t</span>
                    </td>
                    <td>${u.username}</td>
                    <td>${u.gender}</td>
                    <td>${u.birthday}</td>
                    <td>${u.email}</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         onclick="showUpdate(${u.uid})"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             onclick="showDelete(${u.uid})"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>`
        }

        //追加节点。
        $("#usersListBody").append(html);
    }


    //重新绘制分页组件
    function refreshPager(){
        $("#totalRecodes").text(pager.total);
        $("#perPagerSize").text(pager.size);
        let html='';
        //开始绘制上一页。
        $("#myPager").empty();
        if(pager.current === 1){
            html += `<li class="page-item" disabled><a href="#" class="page-link">上一页</a></li>`;
        }else{
            html += `<li class="page-item"><a href="javascript:initUsersList('${(currentPagerNumber-1)}')" class="page-link">上一页</a></li>`;
        }

        //绘制分页号
        for(let i=1;i<=pager.pages;i++){
            if(i === pager.current){
                html+=`<li class="page-item active"><a href="javascript:initUsersList('${i}')" class="page-link">${i}</a></li>`;
            }else{
                html+=`<li class="page-item"><a href="javascript:initUsersList('${i}')" class="page-link">${i}</a></li>`;
            }
        }
         //绘制下一页
        if(pager.current === pager.pages){
            html += `<li class="page-item" disabled><a href="#" class="page-link">下一页</a></li>`;
        }else{
            html += `<li class="page-item"><a href="javascript:initUsersList('${(currentPagerNumber+1)}')" class="page-link">下一页</a></li>`;
        }

        $("#myPager").append(html);
    }

    function doSave() {
        //console.log('执行新增用户....')

        let user = getFormData('addUserForm');
        //console.log('-----要新增的用户信息是：----')
        //console.log(user);
        saveUser(user).then(resp => {
            if (resp.code === 200) {
                //把新增的表单重置一下。
                $("#addUserForm")[0].reset();
                $("#addOrUpdateSuccessModal_msg").text(resp.msg);
                $("#addOrUpdateSuccessModal").modal('show'); // 显示模态窗口....
            }
        })

    }

    function showUpdate(uid) {
        console.log('要更新的用户编号是：' + uid);
        let user = {};
        queryUserByUid(uid).then(resp => {
            console.log(resp);
            if (resp.code === 200) {
                user = resp.data;
                $("#editEmployeeModal #username").val(user.username);
                $("#editEmployeeModal #password").val(user.password);
                $("#editEmployeeModal #birthday").val(user.birthday);
                $("#editEmployeeModal #email").val(user.email);
                $("#editEmployeeModal #mobile").val(user.mobile);
                $("#editEmployeeModal #uid").val(user.uid);
                $("#editEmployeeModal #version").val(user.version);

                let genderNodes = $("#editEmployeeModal input[name=gender]");
                //console.log(genderNodes); //获得的是原生的DOM对象，不是jQuery对象。
                $(genderNodes).each((i, e) => {
                    if (e.value === user.gender) {
                        $(e).prop("checked", true);
                    }
                })
            }
        })

    }

    function doUpdate() {
        let user = getFormData('editUserForm');
        console.log('-----要新增的用户信息是：----')
        console.log(updateUser);

        updateUser(user).then(resp => {
            if (resp.code === 200) {
                //弹窗一个成功的模态窗口，提示新增成功！；
                $("#addOrUpdateSuccessModal_msg").text(resp.msg);
                $("#addOrUpdateSuccessModal").modal('show'); // 显示模态窗口....
            }
        })
    }


    function showDelete(uid) {
        currentDeleteUid = uid;
        console.log('要删除的用户ID：' + uid);
    }

    function doDelete() {
        removeUser(currentDeleteUid).then(resp => {
            if (resp.code === 200) {
                //表示删除成功；
                $("#deleteEmployeeModal").modal('hide'); //隐藏这个窗口....
                //再次重新刷新用户列表。
                setTimeout('initUsersList(currentPagerNumber)', 1000);
            }
        })
    }

    function doDeleteBatch(){
        let ids = [];
        //做什么？
        $(".usersIdChkbox").each((i,e)=>{
            //console.log(e);
            if($(e).prop("checked")){
                //console.log($(e).val());
                ids.push(parseInt($(e).val()))
            }
        })

        console.log("----------要批量删除的用户ID集合是----------")
        console.log(ids);

        removeBatchUsers(ids).then(resp=>{
            if(resp.code ===200){
                $("#deleteBatchEmployeeModal").modal('hide');

                //重新刷新用户列表
                setTimeout('initUsersList(currentPagerNumber)', 1000);
            }
        })
    }

    function closeAddOrUpdateSuccessModal(){
        $("#addOrUpdateSuccessModal").modal('hide');
        //再次重新刷新用户列表。
        setTimeout('initUsersList(currentPagerNumber)', 1000);
    }
</script>
</body>
</html>
